@charset "utf-8";

@font-face {
    font-family: FOT -Gospel Std EB;
    src: url("./FOT -Gospel Std EB.ttf");
}

@font-face {
	font-family: FOT -Carat Std UB;
	src: url("./FOT -Carat Std UB.ttf");
}

@media screen and (min-width: 769px) {
	.title {
		position: absolute;
		display: block;
		line-height: 25wh;
		top: 100px;
		left:10px;
	}
	.title h1 {
		font-family: FOT -Carat Std UB;
		font-size:5vw;
	}
	.fullBox{
		display: block;
	}
	.bigBox {
		position: absolute;
		top:120px;
		left:1%;
		width:97%;
		border: 5px dashed #EC5EA4;
		margin-bottom: 50px;
	}
	.charaImgBox{
		position:relative;
		padding: 10px 1vw;
	}
	.charaImg {
		width: 30vw;
	}
	.infoBox {
		position: absolute;
		width: 35%;
		top: 10px;
		left: 32vw;
	}
	.infoBox2 {
		position: absolute;
		bottom:10%;
		width: 35%;
		left: 32vw;
	}
	.name h2{
		font-family: FOT -Gospel Std EB;
		font-size: 3.5vw;
	}
	.name h2 ruby{
		font-family: FOT -Gospel Std EB;
		font-size: 3.5vw;
	}
	.name h2 ruby rt{
		font-family: FOT -Gospel Std EB;
		font-size: 1.5vw;
	}
	.info{
		
	}
	.info ul li{
		font-size: 1.5vw;
		margin: 0px 0px 0px 0px;
	}
	.info ul li span {
		display: inline-block;
		width: 10vw;
		text-align: justify;
		font-size: 1.5vw;
		font-weight: 800;
	}
	.info ul li span:after {
		content: " ";
		display: inline-block;
		width: 100%;
	}
	.trans {
		font-weight: 500;
	}
	.choiceBox {
		position: absolute; 
		top: 0px;
		left: 66vw;
	}
	.choiceBox h3 {
		font-family: FOT -Carat Std UB;
		font-size: 2.5vw;
	}
	.portraitTable {
		width: 98%;
	}
	.portrait {
		padding: 5px;
	}
	.portrait img {
		width: 8vw;
	}
}

@media screen and (max-width: 768px) {
	.fullBox{
		display: block;
	}
	.bigBox {
		position: absolute;
		top:60px;
		left:0.5%;
		width:96%;
		border: 5px dashed #EC5EA4;
		margin-bottom: 50px;
	}
	.mBox{
	}
	.charaImgBox{
		position: inherit;
		padding: 10px 20px;
	}
	.charaImg {
		width: 60vw;
	}
	.infoBox {
		position: absolute;
		width: 35%;
		top: 10px;
		right: 3%;
	}
	.name h2{
		font-family: FOT -Gospel Std EB;
		font-size: 5vw;
	}
	.name h2 ruby{
		font-family: FOT -Gospel Std EB;
		font-size: 5vw;
	}
	.name h2 ruby rt{
		font-family: FOT -Gospel Std EB;
		font-size: 1.5vw;
	}
	.info{
		
	}
	.info ul li{
		font-size: 3vw;
		margin: 12px;
	}
	.info ul li span {
		display: inline-block;
		width: 19vw;
		font-size: 3vw;
		font-weight: 800;
		text-shadow:#FFF 1px 0 0,#FFF 0 1px 0,#FFF -1px 0 0,#FFF 0 -1px 0;
	}
	.trans {
		font-weight: 500;
	}
	.choiceBox {
		top: 0px;
		left: 35vw;
	}
	.choiceBox h3 {
		font-family: FOT -Carat Std UB;
		font-size: 5vw;
	}
	.portraitTable {
		position: relative;
		width: 100%;
		left: 5%;
	}
	.portrait {
		width: 30%;
		padding: 5px;
	}
	.portrait img {
		width: 20vw;
	}
}